<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>首页</title>
    <link rel="stylesheet" href="../style/weui.css"/>
    <link rel="stylesheet" href="./culture.css"/>
    <link rel="stylesheet" href="./css/swiper.css">
</head>
<body ontouchstart>

	<!-- 顶部搜索框 -->
    <div class="weui-search-bar" id="searchBar">
        <form class="weui-search-bar__form">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                <i class="weui-icon-search"></i>
                <span>群文资讯</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>
	<!-- 幻灯片 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">            
                <a href="javascript:0">
                    <img src="http://zced0.oss-cn-beijing.aliyuncs.com/project/image/2017-05-26/place/wuhong1/9c75a2b5d3a84305a227ff0d5acd8c62.jpg" style="width: 100%;height: 8rem;">
                </a>
            </div>
            <div class="swiper-slide">            
                <a href="javascript:0">
                    <img src="http://zced0.oss-cn-beijing.aliyuncs.com/project/image/2017-05-23/place/gg/5691dcdac852493c95bd2b94223405c6.jpg" style="width: 100%;height: 8rem;">
                </a>
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

	<!-- 头条动态信息 -->
    <div class="weui_panel">
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_small_appmsg">
                <div class="weui_cells weui_cells_access">
                    <div class="weui_cell">
                        <div class="weui_cell_hd" style="display: inline-block;"><img src="./images/icon/top_news.png" style=" width:80px; margin:10px 20px 10px 0;"></div>
                        <div index="1" class="top-news weui_cell_bd weui_cell_primary " active="1">
                            <a href="#">
                                <p class="fnt_color1">标题:群众饮水树干的观点稍微</p>
                            </a>
                        </div>
                        <div index="2" class="top-news weui_cell_bd weui_cell_primary " style="display:none">
                            <a href="#">
                                <p class="fnt_color1">标题二</p>
                            </a>
                        </div>
                        <div index="3" class="top-news weui_cell_bd weui_cell_primary " style="display:none">
                            <a href="#">
                                <p class="fnt_color1">标题三</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

	<!-- 九宫格功能菜单 -->
	<div class="weui-grids">
	    <a href="./yuyueyuding.html" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_1.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            预约预订
	        </p>
	    </a>
	    <a href="./brand_index.html" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_2.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            群文品牌
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_3.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            公益培训
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_4.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            群文赛事
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_5.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            非遗保护
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_6.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            文化志愿
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_7.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            馆办团体
	        </p>
	    </a>
	    <a href="./userCenter.html" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_8.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            个人中心
	        </p>
	    </a>
	    <a href="javascript:;" class="weui-grid">
	        <div class="weui-grid__icon">
	            <img src="./images/nav/nav_9.png" alt="">
	        </div>
	        <p class="weui-grid__label">
	            更多
	        </p>
	    </a>
	</div>

    <!--最新活动-->
    <div class="weui_panel " style="">
        <div class="weui_panel__bd">
            <div class="weui_media_box weui_media_small_appmsg">
            	<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
		            <div class="weui-media-box__hd" style="background:url('./images/icon/recent_activity.png') no-repeat center center; background-size:cover; width:96px; height:74px; ">
		            </div>
		            <div class="weui-media-box__bd">
		                <h4 class="weui-media-box__title">第十七届新福州人歌手大赛海选激情开唱</h4>
		                <p class="weui-media-box__desc">日前，由福州市文化广电新闻出版局主办，福州市群众艺术馆、各县（市）区文体局承办，福州尚宇文化传媒有限公司执行的第十七届新福州人歌手大赛海选正式拉开帷幕。</p>
		            </div>
		        </a>
            </div>
        </div>
    </div>

	<!-- 卡片式资讯列表,下拉自动加载 -->
	<div class="weui_panel weui_panel_access" id="drop_activity">
        <div class="weui_panel_hd txtcenter fnt_color5">最新动态</div>

        <!-- 最新赛事 显示免费及报名,地点 -->
        <div class="weui_panel_bd" id="activities">
            <a href="#" class="weui_media_box weui_media_appmsg" style="">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="imgbox" style="background:url('http://qyg.fzsqyg.com/upload/201705/16/201705161644100890.jpg') no-repeat center center; background-size:cover;">
                        <span class="tag">最新赛事</span>
                        <div class="right_box">
                            <span class="price">免费</span>
                            <span class="join">
                                    正在报名
                            </span>
                        </div>
                    </div>
                    <div class="databox">
                        <p class="title">​第九届福州市少儿故事大王比赛初赛（市直赛区）昨日举行</p>
                        <p class="address"><i>17-05-21-17-12-25</i><span>|</span><i>福州群众艺术馆</i></p>
                    </div>
                </div>
            </a>

            <!--  群文资讯 显示标题和图片-->
            <a href="#" class="weui_media_box weui_media_appmsg" style="">
                <div class="weui_cell_bd weui_cell_primary">
                    <div class="imgbox" style="background:url('http://qyg.fzsqyg.com/upload/201710/12/201710121638210189.jpg') no-repeat center center; background-size:cover;">
                        <span class="tag">群文资讯</span>
                    </div>
                    <div class="databox">
                        <p class="title">​提振精气神 争当排头兵——福州市群众艺术馆干部职工凝心聚力，奋力攻坚</p>
                    </div>
                </div>
            </a>            
            <div class="removable"></div>
        </div>
        
    </div>


	<!-- 底部导航按钮 -->
	<div class="weui-tab" id="tab">
	    <div class="weui-tabbar">
	        <a href="./index.html" class="weui-tabbar__item weui-bar__item_on">
	            <div class="weui-tabbar__icon">
	                <i class="icon-chat"></i>
	            </div>
	            <p class="weui-tabbar__label">首页</p>
	        </a>
	        <a href="javascript:;" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-contact"></i>
	            </div>
	            <p class="weui-tabbar__label">群文资讯</p>
	        </a>
	        <a href="javascript:;" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-discovery"></i>
	            </div>
	            <p class="weui-tabbar__label">非遗风采</p>
	        </a>
	        <a href="./userCenter.html" class="weui-tabbar__item">
	            <div class="weui-tabbar__icon">
	                <i class="icon-profile"></i>
	            </div>
	            <p class="weui-tabbar__label">我</p>
	        </a>
	    </div>
	</div>

    <script src="./zepto.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script src="./js/swiper.js"></script>
</body>

<script type="text/javascript">
    $(function(){
        //initialize swiper when document ready  
        var mySwiper = new Swiper ('.swiper-container', {
          // Optional parameters
          pagination: '.swiper-pagination',//分页
          paginationClickable: true,//切换圆点
          effect: 'coverflow',
          autoplayDisableOnInteraction: false,//用户操作分页后会停止自动播放，添加这个就不会
          direction: 'horizontal',
          //autoplay:3000,
          loop: true,
          spaceBetween: 30,
        }) 

        $('.weui-tabbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });    
    });
</script>
</html>